<template>
  <div>
    <el-container>
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">用户列表</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">设备列表</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <!-- <router-link to="/home/userDetails"> -->
            <el-button type="primary">刷新</el-button>
          <!-- </router-link> -->
          <el-button>返回</el-button>
        </div>
      </div>
      <div>
        <div class="search">
          <el-input class="length right" v-model="search.userName" size="large" clearable placeholder="昵称" />
          <el-input class="length right" v-model="search.phone" size="large" clearable placeholder="手机号码" />
          <el-select v-model="search.wechatStatus" class="m-2 right" clearable placeholder="微信绑定" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="search.status" class="m-2 right" clearable placeholder="状态" size="large">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button class="height" type="primary" @click="searchData">查询</el-button>
          <el-button class="height">重置</el-button>
        </div>
        <el-table :data="
          state.tableData.slice(
            (currentPage4 - 1) * pageSize4,
            currentPage4 * pageSize4
          )
        ">
          <el-table-column type="selection" width="55" />
          <el-table-column :prop="index" :key="index" :label="item" v-for="(item, index) in tableHeader">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
             
            <!-- <router-link to="/home/userDetails"> -->
              <el-button size="small" type="success" 
                >详情</el-button
              >
            <!-- </router-link> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer>
        <!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" v-model:total="allList" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" /> -->
          <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[1, 2, 3, 4]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          v-model:total="allList"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
// import { onMounted, reactive, ref } from "vue";
import { onBeforeMount, reactive, ref } from "vue";
import { userList ,userQueryList} from "../http/api";
const userName = ref("");
const phone = ref("");
const accountType = ref("");
const value = ref("");
const options = [
  {
    value: "1",
    label: "已绑定",
  },
  {
    value: "0",
    label: "未绑定",
  },
];
const options1 = [
  {
    value: "1",
    label: "正常",
  },
  {
    value: "0",
    label: "异常",
  },
];
const tableHeader: any = ref({
  userName: "昵称",
  phone: "手机号码",
  userCarCount: "绑定车辆数",
  unUserOrderCount: "未交费订单",
  wechatStatus: "微信绑定",
  status: "状态",
  registrationTime: "注册时间"
});
let state = reactive({ tableData: [] });
let allList = ref();
//点击详情
const viewDetails=()=>{
  
  console.log(123);
  
  
}
// 搜索
let search = reactive({
  userName: "",
  phone: null,
  status: null,
  wechatStatus:null,

});
// onBeforeMount(() => {});
const getList = userList({})
.then((res: any) => {
    console.log("res", res);
    console.log(res.data.list);
    
    if (res.code === 200) {
      state.tableData = res.data.list;
      allList.value = res.data.total;
    }
  })
  .catch((err) => {
    console.log("err.message", err.message);
    state.tableData = [];
  });

  const searchData = () => {
    userQueryList(search).then((res: any) => {
      console.log(res);
    if (res.code === 200) {
      state.tableData = res.data.list;
      allList.value = res.data.total;
    }
  });
};
const currentPage4 = ref(1);
const pageSize4 = ref(1);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin: 10px 0;
}

.length {
  width: 200px;
}

.search {
  display: flex;
  align-items: center;
  margin: 0 0 12px 12px;
}

.right {
  margin-right: 10px;
}

.height {
  height: 38px !important;
}
</style>